<template>
<div class="music-page">
    <Row class="music-page-content-row" :gutter="10">
        <Col class="left-slide" :span="showMusicMenu ? 18:24">

            <div class="page-header">
                 <Breadcrumb>
                    当前位置：
                    <BreadcrumbItem><Icon type="music-note"></Icon></BreadcrumbItem>
                    <BreadcrumbItem v-for="item in selectMenu" :key="item.uuid">{{item.title}}</BreadcrumbItem>
                </Breadcrumb>
                <div class="subheader">
                    <Button type="ghost" class="add-new-btn" icon="plus" @click="showAddModal = true">新增音乐</Button>

                    <transition name="fade" :delay="500">
                        <Button  type="ghost" icon="chevron-left" style="float:right;margin-left:20px" @click="hideMusicMenu" v-if="!showMusicMenu">显示目录</Button>
                    </transition>
                    <Button type="ghost" class="clear-search-btn" v-if="searchKey" @click="clearSearch()">清空</Button>
                    <Input v-model="searchKey" class="search-input" icon="search" placeholder="音乐名" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                </div>
                <div class="list-content">


                    <div class="music-list">
                            <Row class="header-bar" >
                                <Col span="1">序号</Col>
                                <Col span="2">图片</Col>
                                <Col span="3">音乐名</Col>
                                <Col span="2">演唱者</Col>
                                <Col span="1">歌词</Col>
                                <Col span="3">音质列表</Col>
                                <Col span="2">播放次数/周</Col>
                                <Col span="2">价格</Col>
                                <!-- <Col span="2">MV</Col> -->
                                <Col span="2">上线</Col>
                                <Col span="2">排序</Col>
                                <Col span="4">操作</Col>
                            </Row>
                            <div class="no-data" v-if="musicList.length === 0">暂无数据</div>
                            <!-- <transition name="fade">
                                <div v-if="musicTypeList.length">
                                </div>
                            </transition> -->
                            <div class="music-item" v-for="(music,index) in musicList" :key="music.uuid" :class="music.showDetail?'list-selected':''">
                                <Row class="main-row">
                                    <Col span="1" @click.native="showDetail(music,index)">
                                    {{index + 1}}
                                    <Icon class="va-md arrow-icon" type="arrow-right-b" size="14" :class="{'menu-opened':music.showDetail}"></Icon>
                                    </Col>
                                    <Col span="2">
                                        <img :src="postUrl.imgPath + music.img_url" alt="">
                                    </Col>
                                    <Col span="3">{{music.name}}</Col>
                                    <Col span="2">{{music.singer_name}}</Col>
                                    <Col span="1">
                                        <Icon type="checkmark-circled" size="16" color="#00a854" v-if="music.lyric_file_url"></Icon>
                                        <Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
                                    </Col>
                                    <Col span="3">{{qualityFormat(music.tone_quality_list)}}</Col>
                                    <Col span="2">{{music.weekly_play_num}}次</Col>
                                    <Col span="2">{{music.sale_price ? '￥' + music.sale_price : ''}}</Col>
                                    <!-- <Col span="2">
                                        <Icon type="checkmark-circled" size="16" color="#00a854" v-if="music.vod_mv_info_uuid"></Icon>
                                        <Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
                                    </Col> -->

                                    <Col span="2">
                                        <i-switch :value="music.is_online == '1'" @on-change="isOnlineChange($event,music,index)"></i-switch>
                                    </Col>
                                    <Col span="2">
                                        <Button icon="arrow-up-c" type="text" class="order-btn" @click="orderMusic(music,1)" :disabled="audio_type.leaf_flag != '1'"></Button>
                                        <Button icon="arrow-down-c" type="text" class="order-btn" @click="orderMusic(music,0)" :disabled="audio_type.leaf_flag != '1'"></Button>

                                    </Col>
                                    <Col span="4">
                                        <Button type="primary" shape="circle" icon="edit" @click="editMusic(music,index)">
                                        </Button>
                                        <Button type="error" shape="circle" icon="trash-b" @click="deleteMusic(music,index)">
                                        </Button>
                                        <Button type="ghost" shape="circle" icon="more" @click="showDetail(music,index)">
                                        </Button>
                                    </Col>
                                </Row>
                                <Row class="secondary-row" :class="music.showDetail?'show-detail':''">
                                    <Col span="11" offset="1">
                                        作曲者：{{music.composer_name}}
                                    </Col>
                                    <Col span="11" offset="1">
                                        作词者：{{music.lyric_name}}
                                    </Col>
                                    <Col span="11" offset="1">
                                        创作时间：{{music.song_create_time}}
                                    </Col>
                                    <Col span="11" offset="1">
                                        上传时间：{{music.createtime}}
                                    </Col>
                                    <Col span="23" offset="1" style="padding:0 20px 10px 0">
                                        简介：{{music.intro}}
                                    </Col>
                                </Row>
                            </div>
                    </div>
                    <transition name="fade">
                       <div class="loading-cover" v-if="pageLoading || ordering">
                           <Spin fix size="large"></Spin>
                       </div>
                   </transition>
                </div>
            </div>
        </Col>
        <transition name="menu-animation" enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
        <div class="menu-list" v-if="showMusicMenu">
            <Card>
                <p slot="title">
                    <Icon type="android-list"></Icon> 目录
                </p>
                <Button slot="extra" type="ghost" icon="chevron-right" style="margin-top:-5px" @click="hideMusicMenu">隐藏</Button>
                    <Tree :data="musicTypeList" ref="musicTypeTree"  @on-select-change="onSelectChange"></Tree>
            </Card>
        </div>
        </transition>
    </Row>
    <div class="page-ctrl"  v-if="pageCount">
        <Page :total="pageCount" :current="pageNum" show-elevator @on-change="changePage" show-total :page-size="20"></Page>
    </div>
    <add-music-modal v-model="showAddModal" :inject-data="injectData" :tree-data="modalTreeData" @add-music-sucess="addMusicSuccess"></add-music-modal>
</div>
</template>
<style lang="scss" src="./music.scss">

</style>
<script src="./music.js">
</script>
